<!--
 @description: 首页
 @Author: chich
 @Date: 2021-02-03
-->
<template>
  <dg-scrollbar class="yq-dashboard">
    <!-- <div class="header-btns">
        <span class="header-btns__icon" @click="$router.push('/search')"><i class="el-icon-search"></i></span>
        <span class="header-btns__icon" @click="test"><i class="dg-iconp iconp-text"></i></span>
    </div> -->
    <div class="yq-dashboard__main">
      <el-tabs v-model="activeTab" style="padding: 0 1.5rem;background: #fff;">
        <el-tab-pane v-for="tab in rightComponents" :key="tab.name" :label="tab.label" :name="tab.name" />
      </el-tabs>
      <yjxx v-if="activeTab === 'YJXX'"></yjxx>
      <ldgz v-else-if="activeTab === 'LDGZ'"></ldgz>
      <jldgz v-else-if="activeTab === 'JLDGZ'"></jldgz>
      <no-record v-else></no-record>
      <!-- <div>
        <component
          v-for="item in rightComponents"
          :key="item.id"
          :is="item.component"
          :ref="item.component.name"
          v-bind="dataBind"
        ></component>
      </div> -->

      <dg-card style="margin-top: 0.75rem" shadow="never" none-border class="xx-card">
        <template slot="header">
          <div class="xx-card__header">
            <span class="xx-card__title">信息统计</span>
            <!-- <dg-select v-model="infoValue" :data="infoData"> </dg-select> -->
            <!-- <dg-date-picker
              class="date-picker"
              v-model="infoDate"
              type="daterange"
              call-off
              range-separator="-"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              format="yyyy 年 MM 月 dd 日"
              value-format="yyyy-MM-dd"
              :short-btns="shortBtns"
            >
            </dg-date-picker> -->
          </div>
        </template>
        <xxtj />
      </dg-card>
    </div>
  </dg-scrollbar>
</template>

<script>
import { mapGetters } from 'vuex';
import Yjxx from './modular/yjxx';
import Xxtj from './modular/xxtj';
import Ldgz from './modular/ldgz';
import Jldgz from './modular/jldgz';

// SYXX_YJZS
// SYXX_LDGZ
// SYXX_JLDGZ
export default {
  name: 'dashboard',
  components: {
    Yjxx,
    Xxtj,
    Ldgz,
    Jldgz
  },
  data() {
    return {
      tabs: [
        { label: '预警信息', component: Yjxx, name: 'YJXX', permission: 'SYXX_YJZS' },
        { label: '其他领导关注', component: Ldgz, name: 'LDGZ', permission: 'SYXX_LDGZ' },
        { label: '局领导关注', component: Jldgz, name: 'JLDGZ', permission: 'SYXX_JLDGZ' }
      ],
      activeTab: '',
      activeIndex: 0
      // infoValue: '增量',
      // infoData: [
      //   {
      //     value: '增量',
      //     label: '增量'
      //   },
      //   {
      //     value: '增量1',
      //     label: '增量1'
      //   }
      // ],
      // // 信息统计时间
      // infoDate: '',
      // shortBtns: [
      //   {
      //     text: '近一个月',
      //     time: '-1M'
      //   },
      //   {
      //     text: '近一年',
      //     time: '-1Y'
      //   }
      // ]
    };
  },
  computed: {
    ...mapGetters(['permissions']),
    rightComponents() {
      let rightTabs = [];
      this.tabs.forEach(item => {
        if (this.permissions.includes(item.permission)) {
          rightTabs.push(item);
        }
      });
      return rightTabs;
    }
  },
  watch: {},
  methods: {
    handleTab(item, index) {
      this.activeTab = item.text;
      this.activeIndex = index;
    }
  },
  created() {
    if (this.rightComponents.length) {
      this.activeTab = this.rightComponents[0].name;
    }
  }
};
</script>

<style scoped lang="scss">
@import './index';
</style>
